import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, Form, message } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
const mapStateToProps = (state: any) => ({});
class viewKeyModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();

  constructor(props: any) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}
  onCopy = row => {
    const { viewKeyData } = this.props;
    if (row) {
      const url = viewKeyData.secretPublic;
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand('Copy'); // 执行浏览器复制命令
      oInput.remove();
      message.success('复制公钥成功');
    } else {
      const url = viewKeyData.secretPrivate;
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand('Copy'); // 执行浏览器复制命令
      oInput.remove();
      message.success('复制私钥成功');
    }
  };
  close = () => {
    const { closeModal } = this.props;
    closeModal();
    this.formRef.current?.resetFields();
  };

  render() {
    const { modalVisible, viewKeyData } = this.props;
    const footer = (
      <div>
        <Button size="small" onClick={this.close}>
          完成
        </Button>
      </div>
    );
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      },
    };
    return (
      <Modal
        style={{ top: 20 }}
        footer={footer}
        title="查看密钥"
        visible={modalVisible}
        onCancel={this.close}
      >
        <Form style={{ marginTop: 12 }} ref={this.formRef}>
          <FormItem {...formItemLayout} initialValue={viewKeyData.createType} label="生成规则">
            {viewKeyData.createType === 1 ? '自动生成' : '手动生成'}
          </FormItem>
          <FormItem {...formItemLayout} initialValue={viewKeyData.secretPublic} label="公钥">
            <div className={styles.flexBox}>
              <span className={styles.spanWid}>{viewKeyData.secretPublic}</span>
              <Button type="primary" size="small" onClick={() => this.onCopy(true)}>
                复制公钥
              </Button>
            </div>
          </FormItem>
          <FormItem {...formItemLayout} initialValue={viewKeyData.secretPrivate} label="私钥">
            <div className={styles.flexBox}>
              <span className={styles.spanWid}>{viewKeyData.secretPrivate}</span>
              <Button type="primary" size="small" onClick={() => this.onCopy(false)}>
                复制私钥
              </Button>
            </div>
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(viewKeyModal);
